<template>
  <div>
    <el-collapse>
      <el-collapse-item title="交互配置">
        <el-dropdown @command="handleAdd">
          <text-add-button text="添加交互" />
          <!-- <span class="el-dropdown-link">
            添加页面交互
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span> -->
          <template #dropdown>
            <el-dropdown-menu>
              <template v-for="(item, index) in pageEvents" :key="index">
                <el-dropdown-item :command="item.type">{{ item.name }}</el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <div class="cycle-list" v-for="(item, index) in localData" :key="index">
          <div class="cycle-item">
            <span>{{ pageEvents.find((e) => e.type === item.type) ? pageEvents.find((e) => e.type === item.type).name : '未知项' }}</span>
            <el-dropdown
              @command="
                (v) => {
                  handleMore(v, item, index);
                }
              "
            >
              <el-icon class="el-icon--right">
                <more-filled />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
                  <el-dropdown-item command="delete">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template></el-dropdown
            >
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <lifecycle-setting v-model="visiable" :data="curEditData" :options="options" @submit="handleSubmit" />
  </div>
</template>

<script>
import lifecycleSetting from './lifecycleSetting.vue';
import { cloneDeep } from 'lodash-es';

export default {
  components: { lifecycleSetting },
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: [],
      curEditData: {},
      curEditIndex: 0,
      visiable: false,
      type: 'add',
      pageEvents: [
        {
          type: 'mounted',
          name: '页面载入时'
        },
        {
          type: 'iframe',
          name: '接收到父页面指令时'
        }
      ]
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.localData = newVal;
      },
      immediate: true,
      deep: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal);
      }
    }
  },
  methods: {
    handleAdd(command) {
      this.curEditData = {
        type: command,
        action: '',
        api: '',
        apiParams: [],
        params: {
          contantParams: [],
          compParams: [],
          withFormData: true
        },
        jsonPath: '',
        callback: '',
        compcall: []
      };
      this.type = 'add';
      this.visiable = true;
    },
    handleMore(command, item, index) {
      if (command == 'edit') {
        this.type = 'edit';
        this.curEditIndex = index;
        this.handleEdit(item);
      } else if (command == 'delete') {
        this.handleDelete(index);
      }
    },
    handleEdit(item) {
      this.curEditData = cloneDeep(item);
      this.visiable = true;
    },
    handleDelete(index) {
      this.localData.splice(index, 1);
    },
    handleSubmit(item) {
      if (this.type == 'add') {
        this.handleAdded(item);
      } else {
        this.handleUpdate(item);
      }
    },
    handleUpdate(item) {
      const clone = cloneDeep(item);
      const { type } = clone;
      this.localData.splice(this.curEditIndex, 1, clone);
    },
    handleAdded(item) {
      const clone = cloneDeep(item);
      this.localData.push(clone);
    },
    // 查询该页面交互是否已存在配置
    lifeCycleExit(type) {
      return this.localData.find((item) => item.type == type);
    }
  }
};
</script>

<style lang="scss" scoped>
.cycle-list {
  margin-top: 12px;

  .cycle-item {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    border-radius: 4px;
    border: 1px solid #333;

    .el-icon--right {
      display: none;
    }

    &:hover {
      .el-icon--right {
        display: unset;
      }
    }
  }
}
</style>
